<template>
  <div class="footers">
    <!-- <van-tabbar v-model="footer_a" active-color="#fd5b5a" inactive-color="#000" route  >
		      <van-tabbar-item icon="wap-home-o" to="/" >首页</van-tabbar-item>
		      <van-tabbar-item icon="like-o" to="/Message">消息</van-tabbar-item>
		      <van-tabbar-item icon="description" to="/News">新闻</van-tabbar-item>
		      <van-tabbar-item icon="user-o"  to="/Member">我的</van-tabbar-item>
		    </van-tabbar> -->
    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="background-color: black;">
      <div class="van-tabbar-item van-tabbar-item--active" @click="shouye">
        <div class="van-tabbar-item__icon">
          <img v-show="act!=1" src="/static/image/bot1.png" alt="">
          <img v-show="act==1" src="/static/image/bot1act.png" alt="">
        </div>
        <div :class="act==1?'van-tabbar-item__text act':'van-tabbar-item__text'">首页</div>
      </div>
      <div class="van-tabbar-item" @click="$router.push('/Ranking')">
        <div class="van-tabbar-item__icon">
          <img v-show="act!=2" src="/static/image/bot2.png" alt="">
          <img v-show="act==2" src="/static/image/bot2act.png" alt="">
        </div>
        <div :class="act==2?'van-tabbar-item__text act':'van-tabbar-item__text'">排行榜</div>
      </div>
      <div class="van-tabbar-item" @click="goApply">
        <div class="van-tabbar-item__icon">
          <img v-show="act!=3" src="/static/image/bot3.png" alt="">
          <img v-show="act==3" src="/static/image/bot3act.png" alt="">
        </div>
        <div :class="act==3?'van-tabbar-item__text act':'van-tabbar-item__text'">我要报名</div>
      </div>
      <div class="van-tabbar-item" @click="$router.push('/Huodong')">
        <div class="van-tabbar-item__icon">
          <img v-show="act!=4" src="/static/image/bot4.png" alt="">
          <img v-show="act==4" src="/static/image/bot4act.png" alt="">
        </div>
        <div :class="act==4?'van-tabbar-item__text act':'van-tabbar-item__text'">活动详情</div>
      </div>
    </div>
  </div>
</template>
<style>
.footers {
  position: relative;
  z-index: 6;
}
.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
  border-width: 0px 0;
}

.van-tabbar-item {
  border-top: 1px solid #ebedf0;
}
.footers .van-tabbar--fixed {
  max-width: 750px;
}
</style>
<style scoped>
.footers .van-tabbar-item__icon img {
  height: 28px;
}
.footers .van-tabbar-item__text {
  font-size: 12px;
  color: #cccccc;
}
.footers .van-tabbar-item__text.act {
  color: #fc6e20;
}
</style>
<script>
import { Toast } from 'vant';
import { Dialog } from 'vant';
export default {
  data() {
    return {
      footer_a: 0,
      act: 1,
      iosUrl: 'https://apps.apple.com/cn/app/%E8%9C%82%E5%B7%A2%E5%BD%B1%E8%A7%86%E8%81%94%E7%9B%9F/id1568825575?l=en',
      androidUrl: 'https://a.app.qq.com/o/simple.jsp?pkgname=com.lucky.luckyclient',
      //环境 1安卓 2苹果
      env: null,
    }
  },
  mounted() {
    //判断环境
    let u = navigator.userAgent,
      isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1,//android终端
      isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),//ios
      isWx = !!u.match(/MicroMessenger/i);//微信
    if (isWx) {
      // Toast('请使用浏览器打开页面')
    }
    if (isAndroid) {
      // Toast('安卓')
      this.env = 1
    }
    if (isiOS) {
      // Toast('苹果')
      this.env = 2
    }

  },
  watch: {
    $route: {
      handler(to, form) {
        console.log(1111);
        console.log(to, form);
        switch (to.path) {
          case '/Ranking':
            this.act = 2
            console.log(222);
            break;
          case '/Huodong':
            this.act = 4
            break
          case '/Memberinfo':
            this.act = 3
            break
          default:
            this.act = 1
            break;
        }
      },
      immediate: true
    }

  },
  methods: {
    goto() {

      this.$router.push("/Index")

    },
    shouye() {
      location.href = '/'
    },
    goApply() {
      var _this = this
      if (navigator.userAgent.indexOf("caixuFilmAndriod") != -1 //安卓
        || navigator.userAgent.indexOf("caixuFilmiOS") != -1) {
        this.$router.push("/Memberinfo")
        return
      } else {
        //去下载页面
        this.$router.push("/download")
        //微信
        // let u = navigator.userAgent,
        //   isWx = !!u.match(/MicroMessenger/i);//微信
        // if (isWx) {
        //   Dialog.alert({
        //     message: '请使用浏览器打开页面',
        //   }).then(() => {
        //     // on close
        //   });
        //   // return
        // }

      }
    }
  }
};
</script>
